// import React, { useEffect } from 'react'
// import { motion } from 'framer-motion';
// import { Draggable } from 'gsap/Draggable';
// import gsap from 'gsap';
// const Navbar = ({ darkMode, setDarkMode,isShow }) => {
//   useEffect(()=>{
//     Draggable.create('.logo', {
//       bounds: ".container",
//       inertia: true
//     });
//   },[isShow])
//   return (
//     <motion.nav
//       className="bg-white p-4 dark:bg-gray-900 text-center"
//       initial={{ y: -100, opacity: 0 }}
//       animate={{ y: 0, opacity: 1 }}
//       exit={{ y: -100, opacity: 0 }}
//       transition={{ duration: 0.5, ease: "easeInOut" }}
//     >
//       <div className="container mx-auto flex justify-between items-center">
//         <div className="text-white text-lg font-bold">
//           <img src='./logo.png' alt="Logo" className="logo w-8 h-8 object-contain" />
//         </div>
//         <div className="flex flex-1 justify-evenly space-x-4">
//           {['Contact', 'Subscription', 'About us', 'Services'].map((text, index) => (
//             <motion.a
//               key={index}
//               href={`#${text.toLowerCase().replace(' ', '')}`}
//               className="relative text-black dark:text-white"
//               whileHover={{ y: -5 }}
//             >
//               {text}
//               <motion.span
//                 className="absolute left-0 bottom-0 w-full h-0.5 bg-black dark:bg-black"
//                 initial={{ scaleX: 0 }}
//                 whileHover={{ scaleX: 1 }}
//                 transition={{ duration: 0.3, ease: "easeInOut" }}
//               />
//             </motion.a>
//           ))}
//           <button
//             onClick={() => setDarkMode(!darkMode)}
//             className="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-full p-2 transition duration-500 ease-in-out"
//           >
//             {darkMode ? '🌞' : '🌜'}
//           </button>
//         </div>
//       </div>
//     </motion.nav>
//   )
// }

// export default Navbar


import React, { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { Draggable } from 'gsap/Draggable';
import gsap from 'gsap';

const Navbar = ({ darkMode, setDarkMode, isShow }) => {
  const [hoveredIndex, setHoveredIndex] = useState(null);

  useEffect(() => {
    Draggable.create('.logo', {
      bounds: ".container",
      inertia: true
    });
  }, [isShow]);

  return (
    <motion.nav
      className="bg-white p-4 dark:bg-gray-900 text-center"
      initial={{ y: -100, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      exit={{ y: -100, opacity: 0 }}
      transition={{ duration: 0.5, ease: "easeInOut" }}
    >
      <div className="container mx-auto flex justify-between items-center">
        <div className="text-white text-lg font-bold">
          <img src='./logo.png' alt="Logo" className="logo w-8 h-8 object-contain" />
        </div>
        <div className="flex flex-1 justify-evenly space-x-4">
          {['Contact', 'Subscription', 'About us', 'Services'].map((text, index) => (
            <motion.div
              key={index}
              className="relative"
              onMouseEnter={() => setHoveredIndex(index)}
              onMouseLeave={() => setHoveredIndex(null)}
              whileHover={{ y: -5 }}
            >
              <motion.a
                href={`#${text.toLowerCase().replace(' ', '')}`}
                className="relative text-black dark:text-white"
              >
                {text}
                <motion.span
                  className="absolute left-0 bottom-0 w-full h-0.5 bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500"
                  initial={{ scaleX: 0 }}
                  whileHover={{ scaleX: 1 }}
                  transition={{ duration: 0.3, ease: "easeInOut" }}
                />
              </motion.a>
              {hoveredIndex === index && (
                <motion.div
                  className="absolute top-full left-1/2 transform -translate-x-1/2 mt-2 whitespace-nowrap"
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: 10 }}
                  transition={{ duration: 0.3, ease: "easeInOut" }}
                >
                  <span className="text-black dark:text-white">Click me🤩!</span>
                </motion.div>
              )}
            </motion.div>
          ))}
          <button
            onClick={() => setDarkMode(!darkMode)}
            className="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-full p-2 transition duration-500 ease-in-out"
          >
            {darkMode ? '🌞' : '🌜'}
          </button>
        </div>
      </div>
    </motion.nav>
  );
}

export default Navbar;